<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			label{
				width: 100px;
				height: 100px;
				display: block;/*块*/
				background: red;
				position: relative;
			}
			#upload{
				opacity: 0;/*透明度为0*/
				display: block;/*块*/
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<script src="static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<body>
		
		<form onsubmit="return false;" id="file" action=""><!--onsubmit="return false"	onsubmit事件在表单提交时触发。禁止提交-->
			<label for="upload">
				<input type="file" multiple="multiple" name="f[]" id="upload" value="" /><!--multiple="multiple"上传多个-->
				<span style="font-size: 10px;position: absolute;top: 0;">我是一个上传按钮</span>
			</label>
			
			<input type="text" id="text" name="text" value="" />
			<input type="button" id="btn" value="提交" />
		</form>
		<div id="fc">
			
		</div>
		<script type="text/javascript">
			$(function(){
				var file_data=[];
				$('#upload').change(function(){
					var Filse=$(this).get(0);
					for (var i=0;i<Filse.files.length;i++) {
						//console.log(Filse.files[i]);	//显示当前上传的内容
						file_data.push(Filse.files[i]);//添加到数组尾部
						$('#fc').append(Filse.files[i].name+"<br />");
					}
					//console.log('我发生改变了');
				});
				$('#btn').click(function(){
					var form=new FormData();
					//form.append('key','val');	//添加的格式
					for (var i in file_data) {
						//form.append('f'+i,file_data[i]);
						form.append('f[]',file_data[i]);
					}
					
					//console.log(file_data);
					/*var f=$('#file').get(0);
					var form=new FormData(f);
					$.ajax({
						type:"post",
						url:"/upload.php",
						processData:false,
						contentType:false,
						data:form,
						success:function(mgs){
							console.log(mgs)
						},
						xhr:function(){
							var http=new XMLHttpRequest();//数据提交类
							http.upload.addEventListener('progress',function(e){
								console.log("所有内容的总大小"+e.total);
								console.log('已上传多少'+e.loaded);
							});//注册一个监听上传的函数
							return http;
						}
					});*/				
				});					
			});
		</script>
	</body>
</html>
